<template>
  <div>
    <van-nav-bar fixed title="领取记录" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top pos-r">

      <div v-for="(item,index) in recordList" :key="index" class="item flex-v-c">
				<div class="flex-s-0 flex-center color-primary item-left flex-d-c" v-if="item.MoneyType === 100">
          <span class="fs-32 ">{{item.CouponPrivilegeWayName}}</span>
          <!-- <span v-if="item.MoneyType==2" class="fs-32 ">元</span> -->
        </div>
				<div class="flex-s-0 flex-center color-primary item-left flex-d-c" v-else>
          <span class="fs-64 fw-b lh-64" ><span class="fs-32 pt-20" v-if="item.MoneyType === 2">￥</span>{{ item.Money }}</span>
          <span class="fs-32 ">{{item.MoneyTypeName}}</span>
          <!-- <span v-if="item.MoneyType==2" class="fs-32 ">元</span> -->
        </div>
       
        <div class="flex-1 item-right">
          <p class="fw-b fs-32 text-show-line-1">{{ item.Title }}</p>
          <!-- <p class="mt-16 fs-24 text-show-line-2">全场通用，烟酒等特殊商品除外</p> -->
          <p class="mt-12 fs-24 color-gray">卡号：{{ item.CouponCode }}</p>
        </div>
      </div>
      <no-data v-if="recordList.length === 0" />
      <p v-if="end===true&&recordList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
    </div>
  </div>
</template>

<script>
import noData from 'components/noData'
import { GetCodePage } from 'api/starcoupon'
export default {
  components: {
    noData
  },
  data() {
    return {

      requestData: {
        pageIndex: 1,
        pageSize: 10
      },

      // 统计数据
      OrderCount: 0,
      TotalSale: 0,
      PayWayTotalList: [],

      // 记录列表
      recordList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  created() {
    this.GetCodePage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    GetCodePage() {
      GetCodePage(this.requestData).then(res => {
        if (res) {
          res = res.Data
          if (this.requestData.pageIndex == 1) {
            this.recordList = []
          }
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              this.recordList.push(tem)
            })
          }
          console.log(this.recordList)
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (_this.$utils.getScrollHeight() - _this.$utils.getClientHeight() - _this.$utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          if (_this.requestData.pageIndex < _this.totalAmout) {
            _this.requestData.pageIndex++
            _this.GetCodePage()
          } else {
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.item{
  margin: 24px;
  background: #fff;
  border-radius: 24px;
  padding: 24px 0;
  .item-left{
    width: 220px;
    padding: 0 24px;
  }
  .item-right{
    border-left: 2px solid #F0F0F0;
    padding: 0 20px;
    position: relative;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &:before,&:after{
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 100%;
      background: $colorF5;
      top: -36px;
      left: -12px;
    }
    &:after{
      top: auto;
      bottom: -36px;
    }

  }
}
</style>
